<template>
  <div class="visitorGo wrap">
    <van-tabs v-model="active">
      <!-- 密码开门 -->
      <van-tab title="密码开门" line-width="20px">
        <van-search v-model="value" placeholder="搜索" />
        <div class="location">
          <van-icon name="location" color="#20C07A" size="30" />
          <span>雅馨花苑</span>
        </div>
        <div class="vistor">
          <van-icon name="todo-list" size="20" color="#20C07A" />
          <span>高层一号楼3单元0102(大门出口)</span>
          <p>
            访客码：
            <span class="code">*{{ code }}#</span>
          </p>
          <p>有效时间：{{ new Date() | dateFormat }} 0:00-24:00</p>
        </div>
        <div class="vistor">
          <van-icon name="todo-list" size="20" color="#20C07A" />
          <span>高层一号楼3单元0102(大门出口)</span>
          <p>
            访客码：
            <span class="code">*{{ code }}#</span>
          </p>
          <p>有效时间：{{ new Date() | dateFormat }} 0:00-24:00</p>
        </div>
      </van-tab>
      <!-- 远程开门 -->
      <van-tab title="远程开门">
        <div class="location">
          <van-icon name="location" color="#20C07A" size="30" />
          <span>雅馨花苑</span>
        </div>
        <div class="longdistance">
          <div class="opendoor" v-show="showBoolean" @click="open1">
            <img src="../assets/img/visitor1.jpg" />
            <p>高层一号楼三单元0102#大门出口</p>
          </div>
          <div class="opendoor1" v-show="!showBoolean">
            <img src="../assets/img/visitor2.png" />
            <p>正在开门</p>
          </div>
        </div>
      </van-tab>
      <!-- 访问车辆 -->
      <van-tab title="访客车辆">
        <div class="car wrap">
          <img src="../assets/img/car2.jpg" />
          <p>该小区暂未开放此功能</p>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Dialog, Toast } from "vant";
export default {
  // 弹窗
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  // 定义属性
  name: "VisitorGo",
  data() {
    return {
      active: 0,
      value: "",
      code: "",
      showBoolean: true,
      //   door:{
      //       active:require("../assets/img/visitor2"),
      //       inactive:require("../assets/img/visitor1"),
      //   }
    };
  },
  onLoad: function () {
    //刚进入页面随机先获取一个
    this.createCode();
  },
  methods: {
    createCode() {
      var code = "";
      //设置长度
      var codeLength = 6;
      //设置随机字符
      var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
      //循环codeLength
      for (var i = 0; i < codeLength; i++) {
        //设置随机数范围
        var index = Math.floor(Math.random() * 9);
        //字符串拼接 将每次随机的字符 进行拼接
        code += random[index];
      }
      //将拼接好的字符串赋值给展示的code
      this.code = code;
    },
    open1() {
      // this.showBoolean = !this.showBoolean;
      Toast.loading("正在开门");
      setTimeout(() => {
        Toast.success("开门成功");
      }, 1500);
      // Dialog.alert({
      //   message: "正在开启远程开门",
      //   theme: "round-button",
      // }).then(
      //   s

      // );
    },
  },
  filters: {
    dateFormat(date) {
      // console.log(date);
      var dt = new Date(date);
      // 获取年
      var y = dt.getFullYear();
      // console.log(y)
      // 获取月
      var m = (dt.getMonth() + 1).toString().padStart(2, "0");
      // m = m < 10 ? "0" + m : m
      // console.log(m);
      // 获取日
      var d = dt.getDate().toString().padStart(2, "0");
      // d = d < 10 ? "0" + d : d
      // console.log(d);
      return `${y}-${m}-${d}`;
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.createCode();
    console.log(this.code);
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang='scss' scoped>
.visitorGo {
  ::v-deep.van-tab__text--ellipsis {
    font-size: 16px;
  }
  ::v-deep.van-tabs__line {
    width: 65px;
  }
  ::v-deep.van-field__control {
    padding-left: 4px;
  }
  .location {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    span {
      font-size: 18px;
      padding-left: 10px;
    }
  }
  .vistor {
    margin: 0 12px;
    margin-bottom: 15px;
    background-color: #f3f4f6;
    padding: 15px;
    border-radius: 5px;
    align-items: center;
    span {
      &:nth-of-type(1) {
        font-size: 16px;
      }
    }
    .code {
      font-size: 24px !important;
      color: #20c07a;
    }
    p {
      font-size: 16px;
      margin-bottom: 15px;
      &:nth-of-type(1) {
        margin-top: 15px;
      }
      &:nth-of-type(2) {
        color: #a8a6a7;
      }
    }
  }
  .longdistance {
    // display: flex;
    flex-wrap: wrap;
    text-align: center;
    padding: 0 15px;
    .opendoor {
      position: relative;
      width: 160px;
      background-color: #f3f4f6;
      padding: 30px 0 10px 0;
      margin-right: 20px;
      margin-bottom: 20px;
      border-radius: 10px;
      margin-left: 83px;
      margin-top: 20px;
      &:nth-of-type(2n) {
        margin-right: 0;
      }
      img {
        width: 78px;
      }
      p {
        font-size: 15px;
        color: #666;
      }
    }
    .opendoor1 {
      position: absolute;
      top: 116px;
      left: 94px;
      width: 160px;
      height: 158px;
      background-color: #f3f4f6;
      padding: 30px 0 10px 0;
      margin-right: 20px;
      margin-bottom: 20px;
      border-radius: 10px;
      // visibility: hidden;
      img {
        width: 78px;
      }
      p {
        font-size: 15px;
        color: #666;
      }
    }
  }
  .car {
    width: 100%;
    // height: 100%;
    background-color: #f0f0f0;
    text-align: center;
    // padding: 100px 0 347px 0;
    // padding: 100px 0 361px 0;
    box-sizing: border-box;
    p {
      margin-top: 20px;
      font-size: 16px;
      color: #666;
      box-sizing: border-box;
    }
  }
}
</style>